
<template>
	<div id="all">
		<div id="left">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="Id" label="教师号" width="200" />
				<el-table-column prop="Name" label="姓名" width="100" />
				<el-table-column prop="Date" label="更新日期" width="200" />
				<el-table-column label="删除">
					<template #default="scope">
						<el-button size="small" type="danger" @click="Delete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div id="right">
			<h4 size="large">导入教师目录</h4>
			<el-upload ref="uploadRef" action="#" :on-preview="handlePreview" :on-remove="handleRemove"
				:on-exceed="handleExceed" :on-change="changeFile" accept=".xlsx, .xls" :limit="1" :auto-upload="false">
				<template #trigger>
					<el-button type="primary">点击此处选择文件</el-button>
				</template>
				<el-button type="success" @click="UpdateFile" class="upload">上传</el-button>
				<template #tip>
					<div class="el-upload__tip">
						文件大小不能超过1MB.
					</div>
				</template>
			</el-upload>
			<el-button text @click="table = true">点我手动上传</el-button>
			<el-drawer v-model="table" title="手动添加教师" direction="rtl" size="50%">
				<span><el-input v-model="name_update" placeholder="请输入姓名" /></span>
				<span style="padding-top:10px;"><el-input v-model="tel_update" placeholder="请输入电话" /></span>
				<span><el-input v-model="tid_update" placeholder="请输入教师号" /></span><br>
				<el-button @click="updatestudents">提交</el-button>
			</el-drawer>
		</div>
	</div>
</template>
<script lang='ts' setup>
//@ts-nocheck
import { getTeacher, uploadteacherFile, handaddTeascher, delTeacher } from '@/api/request.js'
const result = ref([])
const table = ref(false)
const jwtToken = localStorage.getItem('jwtToken')
const File = ref()//保存文件
const tableData = ref([])
const tid_update = ref('')
const name_update = ref('')
const tel_update = ref('')
const updatestudents = async() => {
	const handdata = {
		name: name_update.value,
		tel: tel_update.value,
		tid: tid_update.value
	}//手动上传的教师数据
	console.log(handdata);

	let res = await handaddTeascher(jwtToken, handdata)
	if (res.status == 200) {
		ElMessage({
			message: '上传成功',
			type: 'success',
		})
		location.reload()
	}
	else {
		ElMessage.error('上传失败')
	}
	console.log("hand", res);
}//上传学生
const Delete = async (row) => {
	let res = await delTeacher(jwtToken, row.Id);
	if (res.status == 200) {
		ElMessage({
			message: '上传成功',
			type: 'success',
		})
		location.reload()
	}
	else
		ElMessage.error('文件上传失败')
	console.log(res);
	console.log(row.Id);
}
const GETTEACHER = () => {
	getTeacher(jwtToken).then((res) => {
		console.log(res.data.data);
		result.value = res.data.data
		console.log("处理前的数据：", result.value);

		result.value = result.value.map((item) => ({
			Id: item.tid,
			Name: item.name,
			Date: item.updateTime,
		}))
		console.log("处理后的数据：", result.value);
		tableData.value = result.value
	})
}
onMounted(() => {
	GETTEACHER();
})
const UpdateFile = () => {
	console.log("uploadRef")
	let formData = new FormData();
	//formData.append("cid", cid)
	formData.append("file", File.value.raw)
	uploadteacherFile(jwtToken, formData).then((res) => {
		console.log("文件上传结果：", res);
		if (res.status == 200) {
			ElMessage({
				message: '上传成功',
				type: 'success',
			})
			location.reload()
			GETTEACHER();
		}
		else {
			ElMessage.error('文件上传失败')
		}
	})
}//文件上传
const changeFile = (file) => {
	File.value = file
}
</script>
<style scoped lang='scss'>
#all {
	display: flex;
	justify-content: space-between;

	#left {

		margin-right: 30px;
	}

	#right {
		width: 500px;

		.upload {
			margin-left: 10px;
			margin-top: -3px;
		}
	}
}
</style>